<template>
  <a-modal title="新增报表" :visible="visible" ok-text="确定" @ok="handleSubmit" @cancel="handleCancel">
    <a-form-model ref="form" :model="queryParam" :rules="validatorRules">
      <a-form-model-item label="年份" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="year">
        <a-date-picker
          mode="year"
          placeholder="请选择年份"
          format="YYYY"
          value-format="yyyy-MM-dd"
          v-model="queryParam.year"
          :open="yearPickShow"
          style="width: 100%"
          @panelChange="handlePanelChange"
          @openChange="handleOpenChange"
        />
      </a-form-model-item>
      <a-form-model-item label="季度" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="quarter">
        <j-dict-select-tag
          style="width: 100%"
          v-model="queryParam.quarter"
          placeholder="请选择"
          dict-code="sys_quarter"
        />
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import moment from 'moment'
import { getAction } from '@/api/manage'

export default {
  name: 'UserModal',
  components: {},
  data() {
    return {
      queryParam: {
        year: '',
        quarter: '',
      },
      //  判断是哪张报表
      code: '1',
      yearPickShow: false,
      visible: false,
      validatorRules: {
        year: [{ required: true, message: '请选择年度!' }],
        quarter: [{ required: true, message: '请输入季度!' }],
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      url: '/sjxxzhgl/sjProjectReport/getFxwtById',
    }
  },
  created() {},
  methods: {
    handleSubmit() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          let res = {}
          if (this.code == '1') res = await this.CheckOut()
          if (res.success || this.code != '1') {
            this.$emit('openModelView', this.queryParam)
          } else {
            this.$message.error(res.message)
          }
          this.visible = false
          this.queryParam = {
            year: '',
          }
        } else {
          return false
        }
      })
    },
    handleCancel(e) {
      this.queryParam = {
        year: '',
      }
      this.visible = false
    },
    moment,
    // 得到年份选择器的值
    handlePanelChange(value) {
      this.queryParam.year = moment(value).format('YYYY')
      this.yearPickShow = false
      this.$refs.form.validateField('year', (error) => {
        console.log(error)
      })
    },
    // 弹出日历和关闭日历的回调
    handleOpenChange(status) {
      this.yearPickShow = status
    },
    CheckOut() {
      return getAction(this.url, this.queryParam)
    },
  },
}
</script>

<style scoped>
</style>
